<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }
        .video-container {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 75vh; /* 根据需要调整视频大小 */
            object-fit: cover;
        }
        .result {
            display: none;
            font-size: 48px;
            color: #ff0000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body onload="startVideo()">
    <div class="container">
        <video class="video-container" src="gifAndmp3/币1.mp4" playsinline controls id="myVideo"></video>
        <div class="result"></div>
    </div>

    <script>
        function startVideo() {
            const video = document.getElementById('myVideo');
            video.play(); // 页面加载完成后自动播放视频

            // 监听视频播放结束事件
            video.addEventListener('ended', function() {
                video.style.display = 'none'; // 视频结束后隐藏
                const resultText = "恭喜您抽中神秘大奖！"; // 替换为实际抽奖结果
                document.querySelector('.result').innerText = resultText;
                document.querySelector('.result').style.display = 'block'; // 显示抽奖结果
            });
        }

        // 可以添加实际的抽奖逻辑，这里仅作演示
    </script>
</body>
</html>